<template>
  <div class="app">
    <h1>{{str}}</h1>
    <h1 v-text="str"></h1>
    <h1 v-big="str">123</h1>
    <h1 v-very-beauty="str">123</h1>
  </div>
</template>

<script>
  export default {
    name:'App',
    data() {
      return {
        str:'hello'
      }
    },
    directives:{
      // 1.big函数何时调用？ —— 有人使用该指令的时候
      // 2.big函数中的this是谁？—— 爱谁谁，总之不是vm，也不是vc
      big(element,{value}){
        // console.log('big',this)
        // console.log(element,value)
        element.innerText += value.toUpperCase()
      },
      
    }
  }
</script>

<style>
  .app {
    background-color: #aaa;
    padding: 10px;
  }
</style>